<!--包含头部文件-->
{include file="public/header" /}
<style>
    ul li{list-style: none;}
    .track-rcol{border: 1px solid #eee;overflow: auto}
    .track-list{margin: 20px; padding-left: 5px; position: relative;}
    .track-list li{position: relative; padding: 9px 0 0 25px; line-height: 18px; border-left: 1px solid #d9d9d9; color: #999;}
    .track-list li.first{color: red; padding-top: 0; border-left-color: #fff;}
    .track-list li .node-icon{position: absolute; left: -6px; top: 50%; width: 11px; height: 11px; background: url(http://demo.daimabiji.com/3531/img/order-icons.png)  -21px -72px no-repeat;}
    .track-list li.first .node-icon{background-position:0 -72px;}
    .track-list li .time{margin-right: 20px; position: relative; top: 4px; display: inline-block; vertical-align: middle;}
    .track-list li .txt{max-width: 600px; position: relative; top: 4px; display: inline-block; vertical-align: middle;}
    .track-list li.first .time{margin-right: 20px; }
    .track-list li.first .txt{max-width: 600px; }
</style>
<div class="page-container">
    <div>
        <table class="table">
            <tr>
                <th rowspan="3" width="20%"><img src="{$list_info['img_url']}" alt=""height="150px" width="150px"></th>
                <th>商品名：{$list_info['goods_name']}</th>
            </tr>
            <tr>
                <td>采购店铺：{$list_info['shop_name']}</td>
            </tr>
            <tr>
                <td>采购数：{$list_info['goods_num']} 待入库：{$list_info['waiting_storage']} 已入库：{$list_info['already_storage']} 总价：{$list_info['total']}</td>
            </tr>
        </table>

        {volist name='data' id='vo'}
        <div class="panel panel-default" style="margin-bottom: 15px;">
            <div class="panel-header">
                <span style="color: red">规格：</span>{$vo.info.spec_name}  <span style="color: red">需求总数：</span>{$vo.info.number} <span style="color: red">待入库：</span>{$vo.info.waiting_storage} <span style="color: red">已入库：</span>{$vo.info.already_storage}
            </div>
            <div class="panel-body">
                {volist name="$vo.list" id="vl"}
                <table class="table" >
                    <tbody>
                        <tr class="order-tr">
                            <td>订单号：{$vl.tborder_sn}</td>
                            <td>运单号：{$vl.courier_sn}</td>
                            <td><a href="javascript:void(0)" data-num="{$vl.courier_sn}" data-id="{$vl.id}" onclick="get_wuliu(this)" class="btn btn-success radius">查看物流消息</a></td>
                        </tr>
                    </tbody>
                </table>
                <div class="track-rcol" id="{$vl.id}" style="display: none">
                    <div class="track-list">
                        <ul>
                        </ul>
                    </div>
                </div>
                {/volist}
            </div>
        </div>.
        {/volist}


    </div>
</div>
<!--包含footer文件-->
{include file="public/footer" /}

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__STATIC__/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="__STATIC__/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="__STATIC__/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">
function get_wuliu(a) {
    var number = $(a).attr('data-num'); //物流号
    var id = $(a).attr('data-id'); //任务id'
    var show =  $("#"+id).css('display');
    if (show == 'block'){
        $("#"+id).css('display','none');
        $(a).text('查看物流消息')
        return false;
    }
    var html = '';
    if (number == ''){
        alert('物流单号为空')
        return false;
    }else {
        $.ajax({
            type:"post",
            async:false,
            url:"{:url('goods/ajax_getwuliu')}",
            data:{number:number,id:id},
            success:function(data,status){
                if (data.code == 200){
                    var lengt = data.data.list.length
                for (var i=0;i<data.data.list.length;i++){
                    html += '<li>' +
                        ' <i class="node-icon"></i>' +
                        '<span class="time">'+data.data.list[lengt-i-1]['AcceptTime']+'</span> '+
                        '<span class="txt">'+data.data.list[lengt-i-1]['AcceptStation']+'</span> ' +
                        ' </li>';
                }
                $("#"+id).find('ul').eq(0).html(html);

                    $("#"+id).css('display',show =='none'? 'block':'none');
                    $(a).text('隐藏物流消息')

                }else {
                    console.log('错误')
                }

            }
        })
    }
}

</script>
</body>
</html>